<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .borderd{
                width: 700px;
                height: 300px;
                border: 2px solid white;
                margin: 0px auto;
                background-image: url("zd.jpg");
            }
            .borderd1{
                width: 200px;
                height: 50px;
                margin: -50px 320px;
                /*border: 2px solid black;*/
            }
            .timer{
                width: 200px;
                height: 52px;
                /*border: 2px solid black;*/
                margin: 59px 295px;
                font-size: 35px;
                text-align: center;
                line-height: 50px;
                color: red;
            }
            .light{
                 width: 8px;
                 height: 8px;
                 border-radius: 50%;
                 background-color: white;
                margin:-100px 472px;
             }
        </style>
    </head>
    <body>
    <div class="borderd" >

        <div class="timer" id="boom">
        </div>
        <div class="borderd1">
            <input type="submit" value="开始">
            <input type="submit" value="红">
            <input type="submit" value="黄">
            <input id="doom" type="submit" value="绿">
        </div>
        <div class="light">

        </div>
        <script>
            var number=15;
            var boom = document.getElementById("boom")
            var light = document.getElementsByClassName("light")[0];
            var color ="red"
            var interval = setInterval(
                function () {
                    if (color === "red"){
                            color ="white"
                    }else {
                        color = "red"
                    }
                    light.style.backgroundColor = color;
                    if (number<10){
                        tm = "0" + number;
                    }else {
                        tm = number
                    }
                    boom.innerText = "00:00:"+tm;
                    if (number === 0 ){
                        clearInterval(interval)
                    }else {
                        number -=1
                    }
                },700
            )
            var anniu = document.getElementById("doom")
                console.log(anniu);
                anniu.onclick = setInterval(
                    function () {
                    doom.innerText="我炸了，你没了"
                    }
                )
        </script>
    </div>
    </body>
</html>